import React, { useState, useEffect } from "react";
import { loadDMList } from "../api/aiqiyi";
import { Button, Card, Row, Col } from "antd";
import { onCollection, cancelCollection, getCollection } from "../api/fav";

function List() {
  const [books, setBooks] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [isCollection, setIsCollection] = useState(false);
  const { Meta } = Card;
  const collections = getCollection();
  useEffect(() => {
    //   setBooks([1,2,3,4,5,6])
    setIsLoading(true);
    loadDMList(page).then((res) => {
      setBooks([...books, ...res.data.data.list]);

      setIsLoading(false);
    });
  }, [page]);
  return (
    <div>
      <h1>我是一个List组件</h1>
      <h3>{books.length}部电影</h3>
      <Button
        type="primary"
        onClick={() => {
          setPage(page + 1);
        }}
        loading={isLoading}
      >
        下一页
      </Button>
      <Row gutter={4}>
        {books.map((item) => (
          <Col span={6} key={item.albumId + Math.random()}>
            <Card
              hoverable
              style={{
                width: 240,
                margin: "1rem auto",
              }}
              cover={<img alt="example" src={item.imageUrl} />}
              actions={[
                collections.indexOf(item.albumId) > -1 ? (
                  <Button
                    onClick={() => {
                      cancelCollection(item.albumId);
                      setIsCollection(!isCollection);
                    }}
                    type="danger"
                  >
                    取消收藏
                  </Button>
                ) : (
                  <Button
                    onClick={() => {
                      onCollection(item.albumId);
                      setIsCollection(!isCollection);
                    }}
                    type="primary"
                  >
                    收藏
                  </Button>
                ),
              ]}
            >
              <Meta
                title={item.name}
                description="你是谁家的小鬼 这么晚还不睡"
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default List;
